<template>
  <div class="container">
    <video
      :class="['drawVideo', 'video-fade', { 'video-fade-in': videoFadedIn }]"
      ref="drawVideo"
      src="https://invengo-card.oss-cn-shanghai.aliyuncs.com/d9e56387991dcd7fff6c78f659b4b97c.mp4"
      playsinline
      webkit-playsinline
      preload="auto"
      x5-video-player-type="h5"
      x5-video-player-fullscreen="true"
      muted
    ></video>
    <transition name="fade">
      <div v-if="showPoster" class="poster" @click="startPlaybackFromPoster">
        <img :src="posterUrl" alt="poster" />
      </div>
    </transition>
    <audio
      class="listenVideo"
      ref="listenVideo"
      src="https://invengo-card.oss-cn-shanghai.aliyuncs.com/c.mp3"
      preload="auto"
    ></audio>
    <button class="drawBtn" ref="btn" @click="btnClick">
      <span>摇一摇 抽取新年福签</span>
    </button>
    <div class="sticks">
      <div class="stick">岁岁皆欢愉，年年皆胜意。</div>
      <div class="stick">新年快乐，万事兴龙。</div>
      <div class="stick">阖家幸福，岁岁平安。</div>
      <div class="stick">新春嘉平，长乐未央。</div>
      <div class="stick">愿新年，胜旧年。</div>
      <div class="stick">万事顺遂，毫无蹉跎。</div>
      <div class="stick">平安喜乐，前程似锦。</div>
      <div class="stick">福启新岁，万事顺遂。</div>
      <div class="stick">财源广进，日进斗金。</div>
      <div class="stick">事业龙腾虎跃，财运亨通。</div>
      <div class="stick">生意兴隆，财源茂盛。</div>
      <div class="stick">步步高升，宏图大展。</div>
      <div class="stick">龙马精神，再创辉煌。</div>
      <div class="stick">恭喜发财，新年好运来。</div>
      <div class="stick">身体康健，龙马精神。</div>
      <div class="stick">岁岁平安，年年安康。</div>
      <div class="stick">福气满满，好运连连。</div>
      <div class="stick">吃好喝好，没烦没恼。</div>
      <div class="stick">四季平安，福寿安康。</div>
      <div class="stick">有趣有盼，无灾无难。</div>
      <div class="stick">家人闲坐，灯火可亲。</div>
      <div class="stick">新的一年，奔赴热爱。</div>
    </div>
  </div>
</template>

<script>
import posterImage from "@/image/2.png";
export default {
  data() {
    return {
      flag: true,
      showPoster: true,
      posterUrl: posterImage,
      videoFadedIn: true,
    };
  },
  methods: {
    startPlaybackFromPoster() {
      const video = this.$refs.drawVideo
        video.play().then(() => {
          video.currentTime = 0
          video.pause()
        this.showPoster = false;
      }).catch(() => {
      //   // if play still blocked, keep poster and rely on next tap
      })
    },
    btnClick() {
      if (!this.flag) return;
      // this.videoFadedIn = true
      this.showPoster = false;
      this.flag = false;
      console.log("click");
      this.$refs.btn.classList.remove("drawBtnSelected");
      const sticks = document.querySelector(".sticks").children;
      Array.from(sticks).forEach((stick) => {
        stick.classList.remove("stick-selected");
      });
      setTimeout(() => {
        console.log(555);
        const randomIndex = Math.floor(Math.random() * sticks.length);
        Array.from(sticks).forEach((stick, index) => {
          if (index === randomIndex) {
            stick.classList.add("stick-selected");
          }
        });
        this.$refs.btn.classList.add("drawBtnSelected");
      }, 2500);
      this.$refs.drawVideo.play();
      this.$refs.listenVideo.play();
    },
  },
  mounted() {
    const video = this.$refs.drawVideo
    // ensure inline + muted before any play attempts (iOS/Safari requirement)
    try {
      video.muted = true
      video.setAttribute('muted', 'muted')
      video.setAttribute('playsinline', 'true')
      video.setAttribute('webkit-playsinline', 'true')
    } catch (e) {}

    // try autoplay on mount; if blocked, fallback to first interaction
    const tryPlay = () => video.play().catch(() => {})
    tryPlay()

    const resumeOnInteract = () => {
      tryPlay()
      window.removeEventListener('touchstart', resumeOnInteract)
      window.removeEventListener('click', resumeOnInteract)
    }
    window.addEventListener('touchstart', resumeOnInteract, { once: true, passive: true })
    window.addEventListener('click', resumeOnInteract, { once: true })

    this.$refs.drawVideo.addEventListener("ended", () => {
      console.log("ended");
      this.flag = true;
      // listenVideo.pause()
      // listenVideo.currentTime = 0
      // this.$refs.drawBtn.pause()
    });
    this.$refs.drawVideo.addEventListener("error", (e) => {
      console.error("video error", e);
    });
  },
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #000;
}
.drawVideo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.video-fade {
  opacity: 0;
}
.video-fade.video-fade-in {
  opacity: 1;
  transition: opacity 0.35s ease;
}
.poster {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}
.poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.35s ease;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.drawBtn {
  position: absolute;
  bottom: 16.9vh;
  border-radius: 4.8vh;
  left: 50%;
  transform: translateX(-50%);
  width: 38vh;
  height: 8.6vh;
  font-size: 1.76vh;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  cursor: pointer;
  opacity: 0;
  z-index: 20;
}
.drawBtnSelected {
  width: 28vh;
  height: 9.8vh;
  bottom: 18.9vh;
}
.sticks {
  display: block;
  position: absolute;
  z-index: 10;
  top: 38.2vh;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 2.4vh;
  font-weight: bold;
}
.stick {
  display: none;
}
.stick-selected {
  display: block;
  z-index: 10;
  animation: popUp 0.5s forwards;
  left: 48.2%;
  text-align: center;
  color: #d82b2b;
  font-family: "AlimamaFangYuanTiVF-Thin-2";
}
.listenVideo {
  display: none;
}
@keyframes popUp {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
</style>
